<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>9lessons Bootstrap Tutorial</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Le styles -->
    <link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet">
    <style type="text/css">
      body {
        padding-top: 60px;
        padding-bottom: 40px;
      }
      .sidebar-nav {
        padding: 9px 0;
      }
   .face 
   {
	float: left;
	border-right: solid 1px #DEDEDE;
	border-bottom: solid 1px #DEDEDE;
	width: 60px;
	height: 60px;
	padding: 4px;
	background-color: white;
	margin-right: 5px;
	}
	.span7 img
	{
		max-width:550px;
		border: 1px solid #CCC;
		padding: 9px;
		background: white;
	}
	
    </style>
    <link href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet">

    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <!-- Le fav and touch icons -->
    
  </head>

  <body style="background:url(https://lh6.googleusercontent.com/-obBgN3vk1qs/TlOaB41zkcI/AAAAAAAAFJs/a34UV_6PfLw/grids.gif)">
	  <div class="navbar navbar-fixed-top">
	      <div class="navbar-inner">
	        <div class="container">
	          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
	            <span class="icon-bar"></span>
	            <span class="icon-bar"></span>
	            <span class="icon-bar"></span>
	          </a>
	          <a class="brand" href="http://9lessons.info">9LESSONS.info</a>
	          <div class="nav-collapse">
	            <ul class="nav">
	              <li class="active"><a href="http://labs.9lessons.info">Labs</a></li>
	              <li><a href="http://www.9lessons.info/2008/08/table-of-contents.html">Tutorials</a></li>
	              <li><a href="http://wall.9lessons.info">Wall Script 4.0</a></li>
	<li><a href="http://www.9lessons.info/search/label/jQuery?max-results=14">JQuery</a></li>
	  <li><a href="http://demos.9lessons.info">Demos</a></li>
	
	            </ul>
	           
	          </div><!--/.nav-collapse -->
	        </div>
	      </div>
	    </div>
	
  <div class="container">
  <div class="row-fluid">
	
	
  <div class="span8">

<div class="well">
			
<div class="row">

<div class="span7">
<h2>Facebook Timeline Design using JQuery and CSS.</h2>
<p>I know what my readers are expecting from 9lessons blog, after long time I'm going to discuss about Jquery usage. Facebook timeline design makes big revolution in social networking world and it gives new feel to the user profile pages. In this post I want to explain how simple I had implemented this design with Jquery and CSS. Try this demo with modern browsers like Chrome, Firefox and Safari (IE is dead).</p>
<p><img src='https://lh5.googleusercontent.com/-mWvw0JGqC94/TyOimdGMt3I/AAAAAAAAFss/YHKR9HDc6mQ/s550/FacebookTimeline.png' class="row-fluid"></p>
<p><a class="btn btn-info" href="http://www.9lessons.info/2012/01/facebook-timeline-design-using-jquery.html">Read More »</a></p>
</div><!--/span-->

<div class="span7">
<h2>Wall Script 4.0 Update.</h2>
<p>OEmbed expand URL service acquired by embed.ly, now it’s paid service so that I’m releasing this expanding URL fix. Right now this function will work with Youtube and Vimeo links. I have been working with few more popular services. For demo check my profile at labs.9lessons labs.9lessons.info/srinivas </p>
<p><img src='https://lh6.googleusercontent.com/-pd0-vixI3xU/T0pwC_1s2GI/AAAAAAAAFw8/x3fImwKS9Ag/s540/WallUpdate.png' class="row-fluid"></p>
<p><a class="btn btn-success" href="http://www.9lessons.info/2012/02/wall-script-40-update.html">Read More »</a></p>
</div><!--/span-->

<div class="span7">
<h2>Amazon Simple Email Service SMTP using PHP Mailer.</h2>
<p>I have been working with labs.9lessons application hosted at Amazon Web Services. Few days back I had enabled email notification system using Amazon Simple Email Service SMTP implemented with PHP Mailer class, I hope the following tutorial will help you to enable email notification system for your web projects. </p>
<p><img src='https://lh3.googleusercontent.com/-ib9uwfVilNw/T0EccEatYbI/AAAAAAAAFwY/mrYkw8F9HUs/s550/phpmailer.png' class="row-fluid"></p>
<p><a class="btn btn-danger" href="http://www.9lessons.info/2012/02/amazon-simple-email-service-smtp-using.html">Read More »</a></p>
</div><!--/span-->

<div class="span7">
<h2>Memcached with PHP.</h2>
<p>Memcahced open source distributed memory object caching system it helps you to speeding up the dynamic web applications by reducing database server load. In this post I want to explain how I had implemented Memcached object caching system for demos.9lessons.info. This system is very helpful for high traffic media and blog related websites. </p>
<p><img src='https://lh6.googleusercontent.com/-P8ODLFIQVpw/TzAgKt4PjaI/AAAAAAAAFv0/YATp8PoTN4Y/s551/Memcached.png' class="row-fluid"></p>
<p><a class="btn btn-inverse" href="http://www.9lessons.info/2012/02/memcached-with-php.html">Read More »</a></p>
</div><!--/span-->

<div class="span7">
<h2>Login with Facebook and Twitter</h2>
<p>Facebook and Twitter have become large in the social network world and both networks offering oAuth support. We developed a system to login with Twitter and Facebook. Nowadays web users not interested to filling the big registration forms. This script helps you to avoid registration forms, It’s is very useful and simple to integrate. </p>
<p><img src='https://lh3.googleusercontent.com/-Y68CdUhvFXQ/TnZL2i9aF7I/AAAAAAAAFSI/9NsPb54sqwQ/FacebookTwitterLogin.png' class="row-fluid"></p>
<p><a class="btn btn-primary" href="http://www.9lessons.info/2011/02/login-with-facebook-and-twitter.html">Read More »</a></p>
</div><!--/span-->

<div class="span7">
<h2>Ajax Image Upload without Refreshing Page using Jquery.</h2>
<p>Are you looking for ajax file/image upload and preview without refreshing page using Jquery. I had implemented this ajax form submitting using jquery.form plugin and used Arun Shekar's image cropping PHP code for uploading images. Just five lines of JavaScript code, Using this you can upload files, image and videos. </p>
<p><img src='https://lh6.googleusercontent.com/-gZ3ZddsPO20/Tk685mMhmPI/AAAAAAAAFHE/kb8plz-Q-no/Imageajax1.jpg' class="row-fluid"></p>
<p><a class="btn btn-warning" href="http://www.9lessons.info/2011/08/ajax-image-upload-without-refreshing.html">Read More »</a></p>
</div><!--/span-->
			
			            
			
					
			
					
			
			
			
			          </div>
		            
		          </div>
	</div>
	<div class="span4 ">
		<div class="well sidebar-nav">
		            <ul class="nav nav-list">
		              <li class="nav-header">About Me</li>
		<li>
			<div style='overflow:auto'>
		              <img alt="Srinivas Tamada" class="face" src="https://lh3.googleusercontent.com/-VwylUWMEpRw/TQDDK9IbZ5I/AAAAAAAAEN0/Rw6hIAmWHiI/srinivastamada.jpg" title="Srinivas Tamada"> <h4>Srinivas Tamada</h4>Engineer, Thinker, Blogger <br/>
					I love the Web - <a href='mailto:srinivas@9lessons.info'>srinivas [at] 9lessons.info</a><br/>
					CHENNAI - INDIA
		</div>
		              <li>
			<li class="nav-header">Follow Me</li>
			<li>
				<div ><div><iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://platform.twitter.com/widgets/follow_button.1331751378.html#_=1332053826436&amp;id=twitter-widget-14&amp;lang=en&amp;screen_name=9lessons&amp;show_count=true&amp;show_screen_name=true&amp;size=m" class="twitter-follow-button" style="width: 256px; height: 20px; " title="Twitter Follow Button"></iframe></div>
				<div>
				<iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://www.facebook.com/plugins/subscribe.php?href=https%3A%2F%2Fwww.facebook.com%2Fsrinivas.tamada&amp;layout=button_count&amp;show_faces=true&amp;colorscheme=light&amp;font&amp;width=200&amp;appId=223109594375281" style="border:none; overflow:hidden; width:200px;height:25px;margin-top:5px"></iframe>
				</div>
				</div>
				</li>
			
			          </li>
		              <li class="nav-header">Demo Instructions</li>
		     <li>
			Try with different resolutions. Resize your browser 
			</li>
		              <li class="nav-header">ad1</li>
		             <li>
					
			</li>
			 <li class="nav-header">ad2</li>
             <li>
			
	</li>
		            </ul>
		          </div>
		</div>
        
        
          </div><!--/row-->
        </div><!--/span-->
      </div><!--/row-->

      <hr>

      <footer>
	 <div class="container">
        <p>&copy; Srinivas Tamada Production</p>
</div>
      </footer>
Grids, Layouts, Typography, Tables, Forms, Navigation, Alerts
    </div><!--/.fluid-container-->

    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="http://twitter.github.com/bootstrap/assets/js/jquery.js"></script>
    <script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-transition.js"></script>
    <script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-alert.js"></script>
    <script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-modal.js"></script>
    <script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-dropdown.js"></script>
    <script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-scrollspy.js"></script>
    <script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-tab.js"></script>
    <script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-tooltip.js"></script>
    <script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-popover.js"></script>
    <script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-button.js"></script>
    <script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-collapse.js"></script>
    <script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-carousel.js"></script>
    <script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-typeahead.js"></script>

  </body>
</html>
